<template>
  <div class="supplier-container">
    <div class="categories">
      <div class="category-grid">
        <div v-for="(category, index) in supplierCategories" :key="index" class="category" @click="navigateToProductList(category)">
          <h2>{{ category.name }}</h2>
          <div class="category-description">
            <p>{{ category.description }}</p>
            <div class="plum-blossom">梅</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      supplierCategories: [
        {
          name: '战略商品区',
          description: '了解行业动态，分析行业数据，精准把握内容，精准把握内容，精准把握内容',
          type: 'strategic'
        },
        {
          name: '自营商品区',
          description: '了解行业动态，分析行业数据，精准把握内容，精准把握内容，精准把握内容',
          type: 'selfOperated'
        },
        {
          name: '担保商品区',
          description: '了解行业动态，分析行业数据，精准把握内容，精准把握内容，精准把握内容',
          type: 'guarantor'
        },
        {
          name: '闲置商品区',
          description: '了解行业动态，分析行业数据，精准把握内容，精准把握内容，精准把握内容',
          type: 'idle'
        },
        {
          name: '检维修商品区',
          description: '了解行业动态，分析行业数据，精准把握内容，精准把握内容，精准把握内容',
          type: 'maintenance'
        }
      ]
    };
  },
  methods: {
    navigateToProductList(category) {
      // 跳转到商品采购中心页面
      this.$router.push({
        path: '/supply/supplypurch/purchprodinfo',
        query: { categoryType: category.type }
      });
    }
  }
};
</script>

<style scoped>
.supplier-container {
  padding: 40px;
  max-width: 100%;
  margin: 0 auto;
  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
  min-height: 40vh;
}

h1 {
  font-size: 2.2em;
  text-align: center;
  margin-bottom: 40px;
  color: #1a3c34;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.categories {
  overflow-x: auto;
  padding: 10px 0;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 17%); /* 每个分类占五分之一宽度 */
  gap: 20px;
  padding: 0 20px;
  min-width: 1250px; /* 确保 5 个分类总宽度，250px * 5 */
}

.category {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  text-align: center;
  cursor: pointer;
}

.category:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  background-color: #f8f9ff;
}

h2 {
  font-size: 1.4em;
  color: #1a3c34;
  font-weight: 600;
  margin-bottom: 15px;
  padding: 10px;
  background: #e0f2f1; /* 标题背景色：浅青色 */
  border-left: 4px solid #26a69a;
  border-radius: 8px 8px 0 0; /* 圆角仅在上方 */
}

.category-description {
  color: #37474f;
  font-size: 0.95em;
  line-height: 1.5;
  padding: 15px;
  background: #f5f7fa; /* 简介背景色：浅灰色 */
  border-radius: 0 0 8px 8px; /* 圆角仅在下方 */
}

.plum-blossom {
  font-size: 1.2em;
  color: #d81b60;
  font-weight: bold;
  margin-top: 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
</style>
